<style lang="scss" scoped>
@import '@/assets/css/variable';
.goodsListContainer{
	width: 100%;
	background-color: $bgw;
	min-height: 100%;
	font-size: 1.2rem;
	overflow-y: scroll;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: $main-bgc-gray;
	.searchBox{
		height: 50px;
	}
	.menu{
		height: 56px;
		border-bottom: 1px solid #f7f7f7;
		box-shadow: 2px 2px 2px #e7e7e7;
	}
	.list{
		-moz-column-count:2;
		/* Firefox */
			-webkit-column-count:2;
		/* Safari 和 Chrome */
			column-count:2;
		-moz-column-gap:1em;
		-webkit-column-gap:1em;
		column-gap:1em;
		padding: 0 10px;
		background-color: $main-bgc-gray;
		margin-bottom: 50px;
		// overflow-y: scroll;
		// padding: 12px;
		// box-sizing: border-box;
		.item{
			min-height:130px;
			-moz-page-break-inside:avoid;
			-webkit-column-break-inside:avoid;
			break-inside:avoid;
			background:white;
			border-radius: 10px;
			overflow:hidden;
			margin-bottom: 10px;

			// display: flex;
			// flex-direction: column;
			// text-align: center;
			// border-radius: 10px;
			// width: 48%;
			// min-height: 130px;
			// box-sizing: border-box;
			// background-color: blue;   
			// float: left;
			&:nth-child(even){
				margin-right: 0px;
			}
			.pic{
				width: 100%;
				img{
					width: 100%;
					height: 121px;
					object-fit: cover;
				}
			}
			.desc{
				padding:10px;
				line-height: 1.3em;
				.name{
					font-size: 12px;
					color: #555;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;/* 设置行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				.specsAndStock{
					display: flex;
					justify-content: space-between;
					.stock{
						color: $color2;
					}
					span {
						&.split {
							font-size: 1rem;
						}
					}
				}
			}
			
		}
	}
	
}
.van-ellipsis {
	color: $mainColor;
}
</style>

<template>
	<div class="goodsListContainer">
		<div ref="noScrollBox">
			<div class="searchBox">
				<van-search
				  v-model="searchValue"
				  show-action
				  label="商品名称"
				  placeholder="请输入搜索关键词"
				  @search="onSearch"
				>
				  <template #action>
				    <div @click="onSearch">搜索</div>
				  </template>
				</van-search>
			</div>
			<div class="menu">
				<van-dropdown-menu active-color="#4970FD">
					<van-dropdown-item v-model="value1" :options="option1" @change="changeOption"/>
				</van-dropdown-menu>
			</div>
		</div>
		<div class="list">
			<van-list
			  v-model="loading"
			  :finished="finished"
			  finished-text=""
			  offset="200"
			  @load="getProductPage"
			>
				<div class="item" v-for="(item,index) in goodsList" :key="index" @click="toDetailView(item)">
					<div class="pic"><img :src="item.image" alt=""></div>
					<div class="desc">
						<div class="name">{{item.name}}</div>
						<div class="specsAndStock">
							<span class="color-adorn">{{item.specs}}￥</span>
							<!-- <span class="split margL-l">|</span> -->
							<span class="stock margL-l">库存 {{item.stock}}</span>
						</div>
					</div>
				</div>
			</van-list>
		</div>
	</div>
</template>

<script>
import {Dialog,Toast} from 'vant';
import {myMixins} from "@/assets/js/mixins.js"
import { mapGetters,mapActions } from 'vuex'
export default {
	mixins: [myMixins],
	name: 'goodsList',
	data() {
		return {
			searchValue:'',
			active1: '',
			textStatus: 0,
			text1: '取货方式',
			text2: '类型',
			text3: '分类',
			text4: '时间',
			option_act: null,
			// goodsList: [],
			name:'',// 标题搜索
			is_type: 0,// 分类搜搜
			value1:0,
			option1: [
				{ text: '全部', value: 0 },
				{ text: '快递', value: 1 },
				{ text: '到店', value: 2 },
			],
			pageNo:1,
			pageSize: 10,
			loading: false,
			finished: false,
			goodsList:[],
			isCreate:false
		}
	},
	watch: {
		// 监视是否选择了
		textStatus(newValue) {
			this.option_act = this.option3.filter(item => {
				if(newValue === item.value) {
					return item
				}
			})
			console.log(this.option_act)
		}
	},
	computed:{
	    // ...mapGetters(['goodsList']),
	},
	created() {
		// this.getProductPage()
		
	},
	mounted() {
		var screenHeight = document.body.clientHeight
		var noScrollBoxHeight = this.$refs.noScrollBox.offsetHeight + 50
		console.log("noScrollBoxHeight",noScrollBoxHeight)
		var listBoxHeight = screenHeight - noScrollBoxHeight - 50
		this.listBoxHeight = listBoxHeight
		console.log("listBoxHeight",this.listBoxHeight)
	},
	methods: {
		...mapActions(['SET_GOODS_LIST']),
		changeOption(value) {
			console.log('changeOption',value)
			this.is_type = value
			this.goodsList = []
			this.pageNo = 1
			this.getProductPage()
		},
		onSearch(val) {
		  console.log('search',val)
		  this.name = this.searchValue
		  this.goodsList = []
		  this.pageNo = 1
		  this.getProductPage()
		},
		toDetailView(item) {
			this.$store.commit('setGoodsItem',item)
			this.$router.push(`/goodsDetail?id=${item.id}`)
		},
		orderBill() {
			console.log('orderBill')
		},
		getProductPage() {
			let _this = this
			console.log("getProductPage.loading",this.loading)
			this.loading = true
			this.$request.ProductPage({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				merchant_id: localStorage.getItem('merchant_id'),
				is_type: this.is_type,
				name: this.name,
				status:1
			}).then(res=>{
				// Dialog({ message: '提示' });
				if(res.ret==200){
					const goodsList = res.data.data
					console.log("goodsList",goodsList)
					this.goodsList.push(...goodsList)
					this.SET_GOODS_LIST(this.goodsList)
					console.log("this.goodsList",this.goodsList)
					this.loading = false
					if(goodsList.length==0){
						_this.finished = true;
					}else{
						_this.pageNo = _this.pageNo + 1;
					}
				}
			}).finally(res=>{
				this.loading = false;
			})
		},
	}
}
</script>